<template>
  <view class="container">
    <scroll-view
      class="scroll-view"
      scroll-y
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherpulling="onPulling"
    >
      <view class="list">
        <view class="list-item" v-for="(item, index) in list" :key="index">
          <text class="item-text">{{ item }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const isRefreshing = ref(false);
const list = ref([
  "下拉刷新数据 1",
  "下拉刷新数据 2",
  "下拉刷新数据 3",
  "下拉刷新数据 4",
  "下拉刷新数据 5",
]);

// 刷新中
const onRefresh = () => {
  console.log("开始刷新");
  isRefreshing.value = true;

  // 模拟请求数据
  setTimeout(() => {
    const newItem = "新数据 " + (list.value.length + 1);
    list.value.unshift(newItem);
    isRefreshing.value = false;
    uni.showToast({
      title: "刷新成功",
      icon: "success",
    });
  }, 1500);
};

// 刷新被复位
const onRestore = () => {
  console.log("刷新复位");
  isRefreshing.value = false;
};

// 下拉中
const onPulling = e => {
  console.log("下拉中，当前下拉距离：", e.detail.dy);
};
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-color: #f5f5f5;

  .scroll-view {
    height: 100%;
  }

  .list {
    padding: 20rpx;

    .list-item {
      background-color: #fff;
      padding: 30rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

      .item-text {
        font-size: 28rpx;
        color: #333;
      }

      &:active {
        opacity: 0.7;
      }
    }
  }
}
</style>
